<!--
 * @FileDescription:
 * @Author: 茆生涛
 * @Date: 2021-10-12 10:02:25
 * @LastEditors: 茆生涛
 * @LastEditTime: 2021-10-18 11:08:30
-->
<template>
  <v-card class="overflow-hidden">
    <v-app-bar
      absolute
      :color="themeColor"
      dark
      shrink-on-scroll
      prominent
      src="https://picsum.photos/1920/1080?random"
      fade-img-on-scroll
      scroll-target="#scrolling-techniques-3"
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          :gradient="`to top right, ${getThemeColor(0.7)}, ${getThemeColor(0.3)}`"
        ></v-img>
      </template>

      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-app-bar-title>菜单</v-app-bar-title>

      <v-spacer></v-spacer>
      <!-- 搜索 -->
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <!-- 最喜欢的菜 -->
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <!-- 新增 -->
      <v-btn icon>
        <v-icon>mdi-plus-circle-outline</v-icon>
      </v-btn>
    </v-app-bar>
    <v-sheet
      id="scrolling-techniques-3"
      class="overflow-y-auto"
      max-height="600"
    >
      <v-container class="container-box">
        <v-list
      two-line
    >
      <v-list-item
        v-for="(folder, ind) in foods"
        :key="folder.id"
      >
        <v-img
          max-height="100"
          max-width="100"
          :src="folder.img || imgUrl"
        ></v-img>

        <v-list-item-content>
          <v-list-item-title v-text="folder.title"></v-list-item-title>

          <v-list-item-subtitle v-text="folder.subtitle"></v-list-item-subtitle>
        </v-list-item-content>
      <!-- 收藏 -->
        <v-list-item-action>
          <v-btn icon @click.native="favouriteClick(ind, !folder.favourite)">
            <v-icon
                  v-if="!folder.favourite"
                  color="grey lighten-1"
                >
                  mdi-heart-outline
                </v-icon>

                <v-icon
                  v-else
                  color="yellow darken-3"
                >
                  mdi-heart
                </v-icon>
          </v-btn>
        </v-list-item-action>
      </v-list-item>
    </v-list>
      </v-container>
    </v-sheet>
  </v-card>
</template>
<script>
import Vue from 'vue'
import imgUrl from '@/assets/images/empty-img.png'
export default {
  name: 'randomList',
  data () {
    return {
      imgUrl,
      foods: [
        {
          id: 1,
          subtitle: '韭菜、鸡蛋、盐、食用油',
          title: '韭菜炒鸡蛋',
          img: 'http://lorempixel.com/400/200',
          favourite: true
        },
        {
          id: 2,
          subtitle: 'Jan 17, 2014',
          title: 'Recipes',
          img: 'http://lorempixel.com/400/200',
          favourite: true
        },
        {
          id: 3,
          subtitle: 'Jan 9, 2014',
          img: 'http://lorempixel.com/400/200',
          title: 'Photos'
        },
        {
          id: 4,
          subtitle: 'Jan 17, 2014',
          title: 'Recipes'
        },
        {
          id: 5,
          subtitle: 'Jan 9, 2014',
          img: 'http://lorempixel.com/400/200',
          title: 'Photos'
        },
        {
          id: 6,
          subtitle: 'Jan 17, 2014',
          title: 'Recipes',
          favourite: true
        },
        {
          id: 7,
          subtitle: 'Jan 9, 2014',
          title: 'Photos'
        },
        {
          id: 8,
          subtitle: 'Jan 17, 2014',
          img: 'http://lorempixel.com/400/200',
          title: 'Recipes'
        },
        {
          id: 9,
          subtitle: 'Jan 28, 2014',
          title: 'Work'
        }
      ]
    }
  },
  methods: {
    favouriteClick (ind, isFavourite) {
      Vue.set(this.foods[ind], 'favourite', isFavourite)
    }
  }
}
</script>
<style lang="scss" scoped>
  .container-box{
    height: 700px;
    padding-top: 140px;
  }
</style>
